﻿@section head{
    <style>

        .layui-card-body .layui-form-item {
            margin-bottom: 0px;
        }

        .layui-inline button {
            margin-right: 5px;
        }

        .layui-form-item .layui-input-inline {
            width: 200px;
            margin-right: 5px;
        }

        .layui-form-item .layui-inline {
            margin-right: 0;
        }

        @@media screen and (max-width:768px) {
            .layui-form-item .layui-input-inline {
                width: auto;
                margin-left: 5px;
            }

            .layui-inline button {
                margin-top: 5px;
            }
        }
    </style>
}
@section body {
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="filter-form" id="form1">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" id="textUserName" name="textUserName" placeholder="用户" class="layui-input">
                                <input type="text" id="Remark" name="Remark" placeholder="备注" class="layui-hide">
                            </div>
                        </div>
                        <div class="layui-inline">

                            <button type="button" class="pear-btn pear-btn-md pear-btn-primary" data-type="reload" id="btnSearch">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            @if (ViewBag.CoreUserNew)
                            {
                                <button type="button" class="pear-btn pear-btn-primary pear-btn-md" data-type="add">
                                    <i class="layui-icon layui-icon-add-1"></i>
                                    新增
                                </button>
                            }
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </div>
            </form>
            <table id="user-table" lay-filter="user-table"></table>
        </div>
    </div>
    <script type="text/html" id="barDemo">
        @if (ViewBag.CoreUserEdit)
        {
            <a class="pear-btn pear-btn-primary pear-btn-xs" lay-event="edit">编辑</a>
            <a class="pear-btn pear-btn-success pear-btn-xs" lay-event="EnabledTrue">启用</a>
            <a class="pear-btn pear-btn-danger pear-btn-xs" lay-event="EnabledFalse">禁用</a>
        }
        @if (ViewBag.CoreUserDelete)
        {
            <a class="pear-btn pear-btn-primary pear-btn-xs" lay-event="changePassword">修改密码</a>
        }
    </script>
    <script type="text/html" id="switchTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" disabled="" name="Enabled" value="{{d.Gender}}" lay-skin="switch" lay-text="男|女" lay-filter="sexDemo" {{ d.Gender == '男' ? 'checked' : '' }}>
    </script>

    <script type="text/html" id="checkboxTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="lock" disabled="" value="{{d.Enabled}}" lay-text="正常|禁用" lay-skin="switch" lay-filter="lockDemo" {{ d.Enabled == true ? 'checked' : '' }}>
    </script>
}
@section script {

    <script>
        layui.use(['table', 'jquery', 'view', 'common'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let view = layui.view;

            let common = layui.common;


            //方法级渲染
            table.render({
                elem: '#user-table'
                , url: 'GetListJSON'//数据接口
                , toolbar: false //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                , defaultToolbar: ['filter']  //工具栏名称对象['filter', 'print', 'exports']
                , autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
                , page: true//开启分页
                , limit: 10
                , limits: [10, 20, 50, 100]
                , height: 'full-130' //高度最大化减去差值
                , even: false   //若不开启隔行背景，不设置该参数即可true/false
                , method: "post"
                , cols: [[
                    { type: 'numbers' }
                    , { field: 'Name', width: 100, title: '用户名' }
                    , { field: 'ChineseName', width: 200, title: '中文名', sort: true }
                    , { field: 'Enabled', width: 100, title: '状态', templet: '#checkboxTpl' }
                    , { field: 'Gender', title: '性别', width: 100, templet: '#switchTpl' }
                    , { field: 'Email', width: 180, title: 'Email', sort: true }
                    , { field: 'Remark', width: 0, title: '备注', sort: true }//width:0代表占据所有列宽
                    , {title: '操作', toolbar: '#barDemo', width: 250 }
                ]]
                , where: { __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                , done: function (res, curr, count) {
                    // checkButton();//检查按钮权限
                }
            });

            $('.layui-inline .pear-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //重载事件
            active = {
                reload: function () {
                    var UserName = $('#textUserName');
                    table.reload('user-table', {
                        page: {
                            curr: 1
                        }
                        , where: {
                            __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
                            key: UserName.val()
                        }
                    });
                },
                add: function () {
                    top.layer.open({
                        type: 2,
                        resize: false,
                        id: 'iframe1',
                        shade: 0.1,
                        scrollbar: false,
                        content: '/Admin/UserNew',
                        area: common.isModile() ? ['95%', '95%'] : ['1000px', '650px'],
                        cancel: function (index, layero) {
                            btnSearchClick();
                        }
                    });
                }
            };
            //监听排序事件
            table.on('sort(user-table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var UserName = $('#textUserName');
                table.reload('user-table', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        key: UserName.val()
                        , field: obj.field //排序字段
                        , order: obj.type //排序方式
                        , __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value
                    }
                });
            });

            table.on('tool(user-table)', function (obj) {
                if (obj.event === 'changePassword') {
                    window.changePassword(obj);
                } else if (obj.event === 'edit') {
                    window.edit(obj);
                } else if (obj.event === 'EnabledTrue') {
                    window.enabledTrue(obj);
                } else if (obj.event === 'EnabledFalse') {
                    window.enabledFalse(obj);
                }
            });

            window.edit = function (obj) {
                top.layer.open({
                    type: 2,
                    title: '修改',
                    shade: 0.1,
                    area: common.isModile() ? ['95%', '95%'] : ['1000px', '650px'],
                    content: '/Admin/UserEdit?userID=' + obj.data.ID,
                    cancel: function (index, layero) {
                        btnSearchClick();
                    }
                });
            }

            window.changePassword = function (obj) {
                var data = obj.data;
                top.layer.open({
                    type: 2,
                    resize: false,
                    id: 'iframe2',
                    content: '/Admin/UserChangePassword?userID=' + data.ID,
                    area: common.isModile() ? ['95%', '95%'] : ['600px', '400px'],
                });
            }

            window.enabledTrue = function (obj) {
                var data = obj.data;
                if (data.Enabled == true) {
                    layer.msg(data.ID + '已经启用！', {
                        offset: 't',
                        anim: 6
                    });
                    return false;
                }
                top.layer.confirm('真的启用么?', function (index) {
                    //在顶层弹出需要手动关闭
                    top.layer.close(index);
                    //请求登入接口
                    view.req({
                        url: 'UserEnabledChange' //实际使用请改成服务端真实接口
                        , data: { userID: data.ID, userEnable: true, __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                        , type: "post"
                        , dataType: "json"
                        , done: function (res) {
                            if (res.codeIndex == 1) {
                                layer.msg('启用' + data.ID + res.msg, {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                });

                                btnSearchClick();
                            } else {
                                layer.msg(res.msg, {
                                    offset: 't',
                                    anim: 6
                                });
                            }

                        }
                    });
                });
            }
            window.enabledFalse = function (obj) {
                var data = obj.data;
                if (data.Enabled == false) {
                    layer.msg(data.ID + '已经禁用！', {
                        offset: 't',
                        anim: 6
                    });
                    return false;
                }
                top.layer.confirm('真的禁用么?', function (index) {
                    //在顶层弹出需要手动关闭
                    top.layer.close(index);
                    //请求登入接口
                    view.req({
                        url: 'UserEnabledChange' //实际使用请改成服务端真实接口
                        , data: { userID: data.ID, userEnable: false, __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                        , type: "post"
                        , dataType: "json"
                        , done: function (res) {
                            if (res.codeIndex == 1) {
                                layer.msg('禁用' + res.msg, {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                });

                                btnSearchClick();
                            } else {
                                layer.msg(res.msg, {
                                    offset: 't',
                                    anim: 6
                                });
                            }

                        }
                    });
                });
            }
        })
        document.onkeydown = function (e) {
            if (!e) e = window.event;
            if ((e.keyCode || e.which) == 13) {
                // 查找你要判断的文本框
                var myInput = document.getElementById('textUserName');
                if (myInput == document.activeElement) {
                    //获得焦点后查询
                    btnSearchClick();
                }

            }
        }
        //查询事件
        function btnSearchClick() {
            document.getElementById("btnSearch").click();
        }

    </script>
}